﻿@page
@{
    ViewData["Title"] = "任务列表";
    Layout = "~/Pages/Admin/_Layout.cshtml";
}

<div id="app">


    <form class="layui-form form-cus" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">任务分组</label>
            <div class="layui-input-inline">
                <div id="group" class="xm-select-demo"></div>
            </div>

            <label class="layui-form-label">触发器</label>
            <div class="layui-input-inline">
                <input type="checkbox" lay-filter="triggerType" v-model="m.triggerType" lay-skin="switch" lay-text="Cron|Simple">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">任务类名</label>
            <div class="layui-input-block">
                <div id="jobClass" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">任务名称</label>
            <div class="layui-input-inline">
                <input type="text" v-model="m.name" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">任务编码</label>
            <div class="layui-input-inline">
                <input type="text" v-model="m.code" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始日期</label>
            <div class="layui-input-inline">
                <input type="text" v-model="m.startTime" lay-verify="required" lay-verType="tips" id="startTime" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-inline">
                <input type="text" v-model="m.endTime" lay-verify="required" lay-verType="tips" id="endTime" autocomplete="off" class="layui-input">

            </div>
        </div>

        <div class="layui-form-item" id="simple">
            <label class="layui-form-label">间隔时间(s)</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"  v-model="m.interval" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">重复次数</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"  v-model="m.repeatCount" lay-verType="tips" autocomplete="off" class="layui-input">

            </div>
        </div>

        <div class="layui-form-item layui-hide" id="cron">
            <label class="layui-form-label">CRON表达式</label>
            <div class="layui-input-block">
                <input type="text" lay-verify="required"  v-model="m.cron" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>




        <div class="layui-form-item layui-cur-submit">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
            </div>
        </div>

    </form>

</div>



<script>

    var vm = new Vue({
        el: '#app',
        data: {
            m: { name: '', startTime: '', endTime: '', code: '', cron:'--', repeatCount: 0, interval: 5, triggerType: 0 }
        }
    });


    layui.use(['layer', 'jquery', 'common', 'form', 'laydate'], function () {
        var form = layui.form, $ = layui.jquery, os = layui.common, laydate = layui.laydate;;
        var index = parent.layer.getFrameIndex(window.name);

        //日期时间选择器
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
            , trigger: 'click'
            //, format: 'yyyy-MM-dd HH:mm:ss'
            ,
            done: function (value) {
                vm.m.startTime = value;
            }
        });
        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
            , trigger: 'click'
            //, format: 'yyyy-MM-dd HH:mm:ss'
            , done: function (value) {
                vm.m.endTime = value;
            }
        });

        //下拉框
        var groupSelect = os.selectSingleRender({
            el: '#group',
            tips: '请选择任务分组',
            on: function (data) {
               
                if (data.arr.length == 1) {
                    var label = data.arr[0].label;
                    vm.m.group = label;
                } else {
                    vm.m.group = '';
                }
            }

        });
        //下拉框
        var jobClassSelect = os.selectSingleRender({
            el: '#jobClass',
            tips: '请选择任务类名',
            //监听选择事件
            on: function (data) {
                // console.log(data.arr.length);
                if (data.arr.length == 1) {
                    var label = data.arr[0].label;
                    var value = data.arr[0].value;
                    console.log(value);
                    label = label.substring(0, label.indexOf('('));
                    value = value.split(',')[0].split('.')[2];
                    vm.m.code = value;
                    vm.m.name = label;
                } else {
                    vm.m.code = '';
                    vm.m.name = '';
                }
            }
        });



        var oc = {
            //初始化
            init() {
                //获取所有任务分组

                os.ajax('api/admin/sysjobgroup/list',
                    { index: 1, size: 1000 },
                    function (res) {
                        if (res.code == 1) {

                            groupSelect.update({
                                data: res.data.rows
                            })


                        }
                        else {
                            os.error(res.msg);
                        }


                    }, 'get');

                os.ajax('api/admin/sysjob/JobSelect', {}, function (res) {
                    if (res.code == 1) {

                        jobClassSelect.update({
                            data: res.data,
                            prop: {
                                name: 'label',
                                value: 'value',
                            }
                        })


                    }
                    else {
                        os.error(res.msg);
                    }


                }, 'get');




            },




        }
        //初始化
        oc.init();


        form.on('switch(triggerType)',
            function (data) {
                vm.m.triggerType = data.elem.checked == true ? 1 : 0;
                if (data.elem.checked == true) {
                    $("#simple").addClass("layui-hide");
                    $("#cron").removeClass("layui-hide");
                    vm.m.cron = '';
                } else {
                    $("#simple").removeClass("layui-hide");
                    $("#cron").addClass("layui-hide");
                }
               
            });


        //监听提交
        form.on('submit(submit)', function (data) {
            $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
            var urls = "api/admin/sysjob/add";
            //if (opt == 'edit') {
            //    urls = "api/admin/sysdictionary/update";
            //}

            //获取选中的值
            if (jobClassSelect.getValue().length > 0) {
                vm.m.jobClass = jobClassSelect.getValue()[0].value;
            }

            //获取选中的值
            if (groupSelect.getValue().length > 0) {
                vm.m.group = groupSelect.getValue()[0].name;
            }
           

            os.ajax(urls, vm.m, function (res) {
                $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                if (res.code == 1) {
                    parent.layer.close(index);
                    //刷新父页面的数据
                    $('button[data-type="reload"]', window.parent.document).click();
                }
                else {
                    os.error(res.message);
                }
            }, 'post');
            return false;
        });
        $(".btn-open-close").on('click', function () {
            parent.layer.close(index);
        });
    });


</script>
